<template>
  <el-card shadow="never" class="commonMenu-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
    </div>
    <div class="commonMenu-box-body">
      <app-link
        class="item com-hover"
        :to="item.path"
        v-for="(item, i) in commonMenuList"
        :key="i"
      >
        <div class="common_item">
          <div
            :style="{
              background:
                item.iconBackgroundColor ||
                colorList[Math.floor(Math.random() * colorList.length)],
            }"
            class="icon_bgc"
          >
            <i :class="item.icon"></i>
          </div>
          <p class="full_name">{{ item.fullName }}</p>
        </div>
      </app-link>
      <div
        class="common_item item common_item_div"
        @click="addCommonMenu"
        style="cursor: pointer; width: 18%"
      >
        <div :style="{ color: '#1890FF' }" class="icon_bgc">
          <i class="el-icon-plus" style="color: #1890ff; top: 8px"></i>
        </div>
        <p class="full_name" style="color: #1890ff">添加常用</p>
      </div>
    </div>
    <el-dialog
      title="添加常用菜单"
      :append-to-body="true"
      :visible.sync="dialogMenu"
      width="30%"
      height="400px"
      :before-close="handleClose"
    >
      <div class="menuTree" v-if="dialogMenu">
        <el-tree
          :data="menuTree"
          :default-expand-all="true"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-checked-keys="ids"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMenu = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import { mapState } from "vuex";
import AppLink from "./Link";
import { getToken } from "@/utils/auth";
import { cancelHandheldMenu, collectMenu } from "@/api/home";
export default {
  components: { AppLink },
  props: {
    title: { type: String, default: "" },
    pagePosition: { type: Boolean, default: false },
    list: null,
  },
  // props: ["getChList"],
  data() {
    return {
      // menuList: [],
      ids: [],
      commonMenuList: [],
      collectMenuListCopy: [],
      dialogMenu: false,
      filterText: "",
      menuTree: [],
      defaultProps: {
        children: "children",
        label: "fullName",
      },
      colorList: [
        "#ff850f",
        "#7b6ff1",
        "#27c707",
        "#3883fe",
        "#db1a12",
        "#3073f5",
        "#fa8e23",
        "#28a5ba",
        "#ff850f",
        "#7b6ff1",
      ],
    };
  },
  computed: {
    ...mapState({
      menuList: (state) => state.user.menuList,
      collectMenuList: (state) => state.collectMenu.collectMenuList,
    }),
  },
  created() {
    // if (!this.pagePosition) {
    //   this.commonMenuList = this.list;
    //   this.commonMenuList.forEach((item) => {
    //     item.path = item.urlAddress;
    //   });
    // } else {
    this.collectMenuListCopy = this.collectMenuList;
    this.getList();
    // this.getChList(this.commonMenuList);
    // }
    this.$emit("clt", this.commonMenuList);
    if (this.commonMenuList.length == 0) {
      this.recursionData(this.menuList);
      // console.log(this.list, "_________");
      // this.commonMenuList = this.list;
    }
    // if (this.$route.name == "onlineDev-visualPortal") {
    //   // this.commonMenuList = this.list;
    //   this.collectMenuListCopy = this.list;
    // } else {

    // }
  },
  watch: {
    // list: {
    //   handler(val) {
    //     this.getList()
    //   },
    //   deep: true
    // },
    "$store.state.collectMenu.collectMenuList": {
      handler: function (newVal, oldVal) {
        this.collectMenuListCopy = newVal;
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    recursionData(arr) {
      arr.forEach((item) => {
        if (item.children) {
          this.recursionData(item.children);
        } else if (this.commonMenuList.length < 5) {
          this.commonMenuList.push(item);
        }
      });
    },
    addCommonMenu() {
      this.ids = [];
      this.commonMenuList &&
        this.commonMenuList.forEach((item, index) => {
          this.ids.push(item.id);
          // item.iconBackgroundColor = this.colorList[index%10]
        });
      this.menuTree = this.menuList;
      this.recursionTree(this.menuTree);
      this.dialogMenu = true;
    },
    handleClose() {
      this.dialogMenu = false;
    },
    getCheckedNodes() {
      let arr = this.$refs.tree.getCheckedNodes();
      let ids = [];
      arr.forEach((item) => {
        if (!item.children) {
          ids.push(item.id);
        }
      });
      if (ids.length > 9) {
        this.$message({
          message: "最多选择9个常用菜单，请重新选择！",
          type: "warning",
        });
        return;
      } 
      // else if (ids.length < 5) {
      //   this.$message({
      //     message: "最少选择5个常用菜单，请重新选择！",
      //     type: "warning",
      //   });
      //   return;
      // }
      collectMenu({ moduleIdList: ids }).then((res) => {
        this.$message({
          message: "添加成功！",
          type: "success",
        });
        this.$store.dispatch("collectMenu/getCollectMenuList");
        this.dialogMenu = false;
      });
    },
    recursionTree(arr) {
      arr.forEach((item) => {
        if (item.children && item.children.length > 0) {
          item.disabled = true;
          this.recursionTree(item.children);
        } else {
        }
      });
    },
    deleteMenu(id) {
      event.preventDefault();
      cancelHandheldMenu(id).then((res) => {
        this.$store.dispatch("collectMenu/getCollectMenuList");
        // this.getList()
        // this.visitedViews.forEach(item => {
        //   if(item.modelId && item.meta.modelId == modelId) {
        //     item.meta.isAttention = !item.meta.isAttention
        //   }
        // })
      });
    },
    getList() {
      let list = this.collectMenuListCopy.filter((o) => o.id);
      list = list.map((o, i) => {
        let path = "/" + o.urlAddress;
        // 大屏
        if (o.type == 6) {
          let propertyJson = o.propertyJson ? JSON.parse(o.propertyJson) : null,
            moduleId = "";
          if (propertyJson) moduleId = propertyJson.moduleId || "";
          path = `${this.define.dataV}/view/${moduleId}?token=${getToken()}`;
        }
        if (o.type == 7) {
          if (o.linkTarget === "_self") {
            path = "/" + o.enCode;
          } else {
            path = o.urlAddress
              .replace(/\${dataV}/g, this.define.dataV)
              .replace(/\${jnpfToken}/g, getToken());
          }
        }
        return {
          ...o,
          path,
        };
      });
      this.commonMenuList = list;
      this.commonMenuList.forEach((item, index) => {
        this.ids.push(item.id);
        item.iconBackgroundColor = this.colorList[index % 10];
      });
      // this.commonMenuList.length = 7
    },
  },
};
</script>
<style lang="scss" scoped>
.commonMenu-box {
  >>> .el-card__body {
    width: 100%;
    height: calc(100% - 55px);
  }

  .commonMenu-box-body {
    // padding: 0 30px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row;
    .item {
      // display: block;
      text-align: center;
      // width: 98px;
      // margin: 0 10px;
      position: relative;
      width: 18%;
      background-color: #f5f9fa;
      margin: 12px 1% 0px;
      i {
        display: inline-block;
        height: 40px;
        font-size: 17px;
        margin-bottom: 10px;
      }

      .delete-icon {
        position: absolute;
        font-size: 12px;
        width: 15px;
        height: 15px;
        top: -5px;
        right: -2px;
        display: none;
      }

      .name {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .item:hover .delete-icon {
      display: block;
    }

    .icon-style {
      display: inline-block;
      height: 40px;
      font-size: 30px;
      margin-bottom: 10px;
    }
  }
}

.menuTree {
  height: 300px;
  overflow: auto;
}

.item-add {
  cursor: pointer;
}

.item-add:hover {
  color: #1890ff;
}
.common_item {
  background-color: #f5f9fa;
  // width: 180px;
  padding: 9px 0px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  .icon_bgc {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    text-align: center;
    float: left;
  }
  i {
    color: #fff;
    padding-bottom: 5px;
    position: relative;
    top: 7px;
    font-size: 24px;
  }
  .full_name {
    // position: absolute;
    // left: 79px;
    // top: 27px;
    font-size: 14px;
    float: left;
    margin-top: 8px;
    margin-left: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>